﻿
@{
    ViewBag.Title = "油机列表";
    Layout = "~/Views/Shared/_LayoutPage.cshtml";
}

<link rel="stylesheet" href="~/Content/css/frozenui.css">
<link rel="stylesheet" href="~/Content/css/style.css">
<link rel="stylesheet" href="~/Content/css/swiper.min.css">
@*<link rel="stylesheet" href="https://cdn.bootcss.com/weui/1.1.3/style/weui.min.css">
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.1/css/jquery-weui.min.css">
    <script src="https://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-weui/1.2.1/js/jquery-weui.min.js"></script>*@
<script src="~/Content/script/swiper.min.js"></script>
<style>
    * {
        padding: 0;
        margin: 0;
    }

    html, body {
        position: relative;
        height: 100%;
    }

    li, a {
        list-style: none;
        text-decoration: none;
    }

    .swiper-container {
        width: 100%;
    }

    #nav {
        background: #fff;
    }

        #nav .swiper-wrapper {
            height: 1.68rem;
            box-sizing: border-box;
            margin: 0;
            line-height: 1.6rem;
            border-bottom: 2px solid #dfe0e1;
        }

        #nav li {
            text-align: center;
            color: #424242;
            font-size: 0.63rem;
        }

            #nav li span {
                color: #3597D9;
            }

        #nav .active-nav {
            color: #2ECA70;
            border-bottom: 2px solid #2ECA70;
        }

            #nav .active-nav span {
                color: #2ECA70;
            }

    #page {
        position: absolute;
        top: 3.5rem;
        left: 0;
        right: 0;
        bottom: 95px;
        overflow: hidden;
    }

        #page .swiper-slide {
            text-align: center;
            font-size: 30px;
            overflow-y: scroll;
            position: relative;
        }

        #page .list li {
            padding: 15px 8px 15px;
            border-bottom: 1px solid #d4d4d4;
            box-sizing: border-box;
        }

            #page .list li a {
                display: block;
            }

            #page .list li div {
                display: flex;
                justify-content: space-between;
            }

                #page .list li div h3 {
                    color: #000;
                    font-size: 0.7rem;
                }

                #page .list li div h4 {
                    flex: 0 25%;
                    font-size: 0.7rem;
                    color: #3597D9;
                }

        #page .list li {
            background: #fff;
        }

            #page .list li p {
                text-align: left;
                font-size: 0.5rem;
                color: #777;
                line-height: 1rem;
            }

    #seacher {
        display: flex;
        justify-content: space-between;
        padding: 6px 8px;
        background: #E9EDF0;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #seacher input {
            margin-right: 10px;
            width: 80%;
            background: #fff;
            border: none;
            border-radius: 5px;
            outline: none;
            box-sizing: border-box;
            padding: 0 10px;
            text-align: center;
            font-size: 0.6rem;
            height: 1.32rem;
        }

        #seacher button {
            width: 20%;
            border-radius: 4.96px;
            border: none;
            background: #2ECA70;
            color: #fff;
            outline: none;
            line-height: 1.32rem;
            font-size: 0.6rem;
            height: 1.32rem;
        }

            #seacher button img {
                width: 0.7rem;
                vertical-align: text-top;
                display: inline;
            }

    #timeRadio {
        display: flex;
        padding: 2px 6px;
        height: 1.32rem;
        box-sizing: content-box;
    }

        #timeRadio .ui-radio {
            margin-right: 0.72rem;
            line-height: 1.32rem;
            font-size: 0.65rem;
            color: #424242;
            font-weight: bold;
        }

            #timeRadio .ui-radio input {
                width: 1rem;
                height: 1rem;
                /*top: -2px;
                margin-right: 5px;*/
                top: -0.1rem;
                margin-right: 0.1rem;
            }

                #timeRadio .ui-radio input:before {
                    width: 0.9rem;
                    height: 0.9rem;
                    background: #fff;
                    left: 0.05rem;
                    top: 0.05rem;
                    border-radius: 0.5rem;
                }

                #timeRadio .ui-radio input:checked:after {
                    width: 0.5rem;
                    height: 0.5rem;
                    background: #2ECA70;
                    border: 1px solid #2ECA70;
                    border-radius: 0.4rem;
                    left: 0.25rem;
                    top: 0.25rem;
                }

    #footer {
        /*position: absolute;
            height: 1.6rem;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0;
            margin: 0;
            background-color: #00bcd4;*/
        position: absolute;
        height: 1.6rem;
        left: 0;
        right: 0;
        bottom: 2rem;
        padding: 0;
        margin: 0;
        background-color: #00bcd4;
        z-index: 999;
    }

        #footer .ui-btn-primary {
            height: 1.6rem;
            width: 100%;
            line-height: 1.6rem;
            font-size: 0.68rem;
        }
</style>
<style>
    /*.aui-iconfont {
            font-size: 26px;
            color: #dcdcdc;
            float: right;
            padding-right: 40px
        }*/
    .alarm-low {
        /*background-color: #ffff00;*/
        background-color: #2ECA70;
        color: aliceblue;
    }

    .alarm-noload {
        background-color: #81007f;
        color: aliceblue;
    }

    .alarm-other {
        background-color: red;
        color: aliceblue;
    }
</style>
@*</head>
    <body>*@
<div id="seacher">
    <input id="Msg" type="text" placeholder="请输入油机信息查询">
    <button id="Search"><img src="~/Content/image/search (1).png" alt="Alternate Text" />&nbsp;搜索</button>
</div>
<div id="timeRadio">

    <label class="ui-radio" for="radio">
        <input type="radio" id="allGen" name="radio" value="0" />全部
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" id="inGen" checked="" name="radio" value="1" />发电
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" id="standGen" name="radio" value="5" />待用
    </label>
    <label class="ui-radio" for="radio">
        <input type="radio" id="fixGen" name="radio" value="3" />维修
    </label>
    <label style="line-height:28px;float:right;color:#808080;font-size:10px">
        <span id="genListCount">共0条</span>
    </label>
</div>
@*<div id="nav" class="swiper-container">
        <ul class="swiper-wrapper">
            <li class="swiper-slide active-nav">待接单(<span id="noExtTotal">0</span>)</li>
            <li class="swiper-slide ">执行中(<span id="exingTotal">0</span>)</li>
            <li class="swiper-slide">已结单(<span id="completelyTotal">0</span>)</li>
            <li class="swiper-slide">已审核(<span id="audiuTotal">0</span>)</li>
        </ul>
    </div>*@
<div class="swiper-container" id="page">
    <div class="swiper-wrapper">
        <div class="swiper-slide slidepage" id="loadPage">
            <ul class="list" id="genList">
                @*<li>
                        <a href="/Generator/Detail?dtuid=1111">
                            <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                                <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                            </div>
                            <div><h3>油机1001</h3></div>
                            <p><span style="color:green;margin-right:15px">发电</span>编号:163464967949</p>
                        </a>
                    </li>
                    <li>
                        <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                            <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                        </div>
                        <div><h3>油机1001</h3></div>
                        <p><span style="color:#104A7D;margin-right:15px">待用</span>编号:163464967949</p>
                    </li>
                    <li>
                        <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                            <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                        </div>
                        <div><h3>油机1001</h3></div>
                        <p><span style="color:red;margin-right:15px">维修</span>编号:163464967949</p>
                    </li>
                                <li>
                                    <a href="/Generator/Detail?dtuid=1111">
                                        <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                                            <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                                        </div>
                                        <div><h3>油机1001</h3></div>
                                        <p><span style="color:green;margin-right:15px">发电</span>编号:163464967949</p>
                                    </a>
                                </li>
                                <li>
                                    <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                                        <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                                    </div>
                                    <div><h3>油机1001</h3></div>
                                    <p><span style="color:#104A7D;margin-right:15px">待用</span>编号:163464967949</p>
                                </li>
                                <li>
                                    <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                                        <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                                    </div>
                                    <div><h3>油机1001</h3></div>
                                    <p><span style="color:red;margin-right:15px">维修</span>编号:163464967949</p>
                                </li>
                                <li>
                                    <a href="/Generator/Detail?dtuid=1111">
                                        <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                                            <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                                        </div>
                                        <div><h3>油机1001</h3></div>
                                        <p><span style="color:green;margin-right:15px">发电</span>编号:163464967949</p>
                                    </a>
                                </li>
                                <li>
                                    <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                                        <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                                    </div>
                                    <div><h3>油机1001</h3></div>
                                    <p><span style="color:#104A7D;margin-right:15px">待用</span>编号:163464967949</p>
                                </li>
                                <li>
                                    <div style="float:left;width: 55px;height: 55px;margin-right:16px">
                                        <img style="width:100%;height:100%" src="~/Content/image/genonline.jpg" />
                                    </div>
                                    <div><h3>油机1001</h3></div>
                                    <p><span style="color:red;margin-right:15px">维修</span>编号:163464967949</p>
                                </li>*@
            </ul>
        </div>
        @*<div class="swiper-slide slidepage">
                    <ul class="list" id="exeing"></ul>
                </div>
                <div class="swiper-slide slidepage">
                    <ul class="list" id="completely"></ul>
                </div>
                <div class="swiper-slide slidepage">
                    <ul class="list" id="audiu"></ul>
                </div>
            </div>*@
    </div>
</div>

<section class="ui-container actionOne">
    <section id="actionsheet">
        <div class="demo-item">
            <div class="demo-block">
                <div class="ui-actionsheet" id="actionsheet1">
                    <div class="ui-actionsheet-cnt am-actionsheet-down">
                        <h4>选择操作菜单</h4>
                        <button id="addGen">添加油机</button>
                        <button id="GenMain">油机保养列表</button>
                        <button id="GenMaintain">采集器维修列表</button>
                        <button id="GenBracket">采集器支架图片列表</button>
                        <button id="returnList">刷新列表</button>
                        <div class="ui-actionsheet-split-line"></div>
                        <button id="cancel">取消</button>
                    </div>
                </div>
            </div>
        </div>
    </section>
</section>

<div class="ui-btn-wrap" id="footer">
    <button class="ui-btn-primary">
        操作
    </button>
</div>
<script>
    var page = 1;//第几页
    var limit = 50;//每页的数量
    var Isload = false; //滑动加载锁
    var radioValue = 1;//
    var IslastData = false //标记最后一条数据
    var Msg = ""; //查询
    getGenList(1, ""); //初始化 默认发电
    $("#allGen").prop("checked", false);
    $("#inGen").prop("checked", true);
    $("#standGen").prop("checked", false);
    $("#fixGen").prop("checked", false);

    (function (designWidth, maxWidth) {
        var html = document.getElementsByTagName("html")[0];
        var tid;
        function refreshRem() {
            var width = html.getBoundingClientRect().width;
            console.log(width / 15)
            html.style.fontSize = width / 15 + "px"
        }
        window.addEventListener("resize", function () {
            clearTimeout(tid); //防止执行两次
            tid = setTimeout(refreshRem, 300);
        }, false);
        refreshRem();
    })();

    //工单状态tap点击事件
    (function (doc, win) {
        var size = 10;
        //var myNav = new Swiper('#nav', {
        //    spaceBetween: 10,
        //    slidesPerView: 4,
        //    watchSlidesProgress: true,
        //    watchSlidesVisibility: true,
        //    on: {
        //        tap: function () {
        //            menuIndex = myNav.clickedIndex;
        //            myPage.slideTo(myNav.clickedIndex);
        //        }
        //    }
        //});

        $("#footer").click(function () {
            $('.ui-actionsheet').addClass('show');
        });
        $("#addGen").click(function() {
            window.location.href = '/Generator/AddGen';
        })
        $("#GenMain").click(function () {
            window.location.href = '/GenMain/Index';
        })
        $("#GenMaintain").click(function () {
            window.location.href = '/Maintain/Index';
        })
        $("#GenBracket").click(function () {
            window.location.href = '/Bracket/Index';
        })


        $("#cancel").click(function () {
            $(".ui-actionsheet").removeClass("show");
        });
        //工单状态滑动事件
        //var myPage = new Swiper('#page', {
        //    on: {
        //        slideChangeTransitionStart: function () {
        //            updateNavPosition()
        //        }
        //    }
        //});

        //工单状态滑动方法
        function updateNavPosition() {
            $('#nav .active-nav').removeClass('active-nav');
            var activeNav = $('#nav .swiper-slide').eq(myPage.activeIndex).addClass('active-nav');
            menuIndex = activeNav.index();
            if (!activeNav.hasClass('swiper-slide-visible')) {
                if (activeNav.index() >= myNav.activeIndex) {
                    var thumbsPerNav = Math.floor(myNav.width / activeNav.width()) - 1
                    myNav.slideTo(activeNav.index() - thumbsPerNav)
                } else {
                    myNav.slideTo(activeNav.index())
                }
            }
        }

    })(document, window);



    var datalist = "";
    var genListCount = 0;//统计
    //油机统计方法
    function getGenList(rows, order) {
        //ajax参数
        var paramdata = {
            rows: rows,
            order: order,
            page: page,
            limit:limit
        };
        Isload = true;
        $.ajax({
            url: '/api/Generator/GetGenList',
            type: 'get',
            data: paramdata,
            beforeSend: function () {
                openLoading();
            },
            error: function (data) {
                closeLoading();
                console.log(JSON.stringify(data));
            },
            success: function (data) {
                closeLoading();
               // $("#genList").html("");
                var onlineImg = "/Content/image/genonline.jpg";
                var offineImg = "/Content/image/genoffline.jpg";

                // var result = eval(data);
                //console.log(data)
                //var result = JSON.parse(data);//转化
                var result = data.Data
                genListCount = result.total
                result = result.data
                //console.log(result)
                var localRecordTxt = "<li><p class='aui-text-center'>" + genListCount + "条记录</p></li>";
                if (result == null || result == "") {
                    if (!IslastData) {
                        IslastData=true
                        datalist = localRecordTxt;
                    }
                } else {
                    result.forEach(function (d, i) {
                       // console.log(d.Alarm)
                        //告警图标显示
                        var alarm;
                        if (d.Alarm && d.Alarm.indexOf('空载') !== -1) {
                            alarm = "<div class='aui-label alarm-noload'>空载</div>";
                        } else if (d.Alarm && d.Alarm.indexOf('欠压') !== -1) {
                            alarm = "<div class='aui-label alarm-low'>欠压</div>";
                        } else if (d.Alarm && d.Alarm.indexOf('欠频') !== -1) {
                            alarm = "<div class='aui-label alarm-other'>欠频</div>";
                        } else if (d.Alarm && d.Alarm.length > 0) {
                            // alarm = "<div class='aui-label alarm-other'>其它</div>";
                            alarm = '';
                        } else {
                            alarm = '';
                        }

                        var isOnline = d.BOnline === true ? onlineImg : offineImg;
                        if (d.ComputedStatus === 1) {
                            d.ComputedStatus = "<span style='color:green;margin-right:15px;font-size: 15px;'>发电</span>";
                        }
                        else if (d.ComputedStatus === 5) {
                            d.ComputedStatus = "<span style='color:#104A7D;margin-right:15px;font-size: 15px;'>待用</span>";
                        }
                        else if (d.ComputedStatus === 3) {
                            d.ComputedStatus = "<span style='color:red;margin-right:15px;font-size: 15px;'>维修</span>";
                        }
                        // datalist += "<li><a href='/Generator/Detail?dtuid="+d.DTUID+"'><div style='float:left;width: 55px;height: 55px;margin-right:16px'><img style='width:100%;height:100%' src='"+ isOnline +"' /></div><div><h3>" + d.GensetNum + "</h3></div><p>" + d.ComputedStatus + "编号:" + d.DTUID + "</p></a></li>"
                        datalist += "<li><a href='/Generator/Detail?dtuid=" + d.DTUID + "'><div style='float:left;width: 55px;height: 55px;margin-right:16px'><img style='width:100%;height:100%' src='" + isOnline + "' /></div><div><h3>" + d.GensetNum + "</h3><i onclick='' style='' class='aui-iconfont aui-icon-k'>" + alarm + " </i> </div><p>" + d.ComputedStatus + "编号:" + d.DTUID + "</p></a></li>"
                       // genListCount++;
                    })
                }
                //$("#genList").html(datalist);
                $("#genList").append(datalist);
                // $('.slidepage').eq(menuIndex).children("ul").append(datalist);
                //console.log(genListCount)
                //if (genListCount >= 10000) //4位数
                //{
                //    $("#genListCount").html("" + genListCount + "");
                //}
                //else {
                //    $("#genListCount").html("共" + genListCount + "条");
                //}
                $("#genListCount").html("共" + genListCount + "条");
                Isload = false;
                datalist = "";
                //genListCount = 0;
            }
        })
    }

    //刷新
    $("#returnList").click(function () {
        $("#Msg").val('');
        $("#genList").html(""); //清空列表
        page = 1;
        $(".ui-actionsheet").removeClass("show");
        getGenList(1, "");
        $("#allGen").prop("checked", false);
        $("#inGen").prop("checked", true);
        $("#standGen").prop("checked",false);
        $("#fixGen").prop("checked",false);
    })

    //radio点击事件
    $(':radio').click(function () {
        $("#Msg").val('');
        initQuery();
        radioValue = $(this).val()  //获取选中的radio的值
        getGenList(radioValue, '');
    });

    //搜索
    $("#Search").click(function () {
         Msg = $("#Msg").val().trim();
        if (Msg=="") {
            alert("请输入油机信息");
            return;
        }
        initQuery();
        getGenList(4, Msg);
        $("#allGen").prop("checked", false);
        $("#inGen").prop("checked", false);
        $("#standGen").prop("checked", false);
        $("#fixGen").prop("checked", false);
    })

    //复原查询
    function initQuery() {
        IslastData = false;//最后一条数据标记
        page = 1;//页数
        $("#genList").html(""); //清空列表
        Msg = $("#Msg").val().trim();
    }
    $(document).ready(function () {
        initQuery();

    })
    //滚动事件

    //滚动刷新
    $(document).ready(function () {
       // console.log("滚动刷新")
        var $el = $("#loadPage");
       // console.log($el)
        var menuIndex = 0;
        loadData($el, function () {
            // 防止加载多次请求 这里非常重要 这里非常重要 这里非常重要
            console.log("请求-loadtee")
            if (Isload) return false;
            page = page + 1;
            // page=8000 //测试
            getGenList(radioValue, Msg);
        });
    })

   @*/**
   *
   * @param {Element} $el 需要滚动的高度
   * @param {Number} difference 距离底部触发callback
   * @param {Function} callback 下拉加载的回调
   */*@
    function loadData($el, callback, config) {
        config = config || {};
        config.difference = config.difference || 20;
        var timer = null;
        $el.scroll(function (e) {
            //  console.log("loadData--事件节流")
            // 事件节流
            if (timer) {
                clearTimeout(timer)
            }
            timer = setTimeout(() => {
                var $content = $(this)[0];
                var scrollHeight = $content.scrollHeight;
                var scrollTop = $content.scrollTop + $el.height();
                if (scrollTop + config.difference > scrollHeight) {
                    callback && callback();
                }
            }, 300);
        });
    }

</script>

